import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from "jquery"
import "./index.css"
class Index extends Component{
	constructor(props){
		super(props)
		this.state={
			filename:""
		}
	}
	file(){
		var filename=this.avatar.value
		var arr = filename.split("\\")
		this.setState({
			filename:arr[arr.length-1]
		})
	}
	submit(ev){
		if(!this.state.filename){
			ev.preventDefault()
			return ;
		}
		return ;
	}

	render(){
		return (
			<div className="container ">
				<div className="row">
					<div className="bg col-lg-4 col-md-4 col-sm-6 col-xs-6
									col-lg-push-4 col-md-push-4 col-sm-push-3 col-xs-push-3
					">
						<form action="/avatar" method="post" enctype="multipart/form-data">
							<div className="form-group">
								<div className="has-feedback">
									<label htmlFor="avatar" className="font-relief">请选择图片</label>
									<input 
										ref={(input)=>this.avatar=input}
										onChange={this.file.bind(this)}
										type="file" 
										id="avatar" 
										name="avatar" 
										className="form-control falsebtn"
									 />
									 <span className="filebtn">选择图片 </span>
									 <span className="filename"> {this.state.filename}</span>
									<span className={this.state.filename?"glyphicon glyphicon-ok form-control-feedback avatar-glyphicon":"glyphicon glyphicon-remove form-control-feedback avatar-glyphicon"}></span>
								</div>
							</div>
							<div className="form-group">
								<input 
									type="submit" 
									id="submit" 
									name="submit" 
									className="form-control submit font-relief" 
									value="提交" 
									onClick={this.submit.bind(this)}
								/>
							</div>
						</form>
					</div>
				</div>
			</div>
		)
	}
}
ReactDOM.render(<Index />, document.getElementById('index'));
